const {Configuration} = require('webpack')
const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const {VueLoaderPlugin} = require('vue-loader')
const { CleanWebpackPlugin } = require('clean-webpack-plugin')
const FriendlyErrorsWebpackPlugin = require('friendly-errors-webpack-plugin')


/** 
 * @type {Configuration}
 * 
*/

const config = {
  mode: 'development',
  entry: './src/main.ts',
  output: {
    filename: '[hash].js',
    path: path.resolve(__dirname + '/dist') 
  },
  module: {
    rules: [
      {
        test: /\.vue$/,
        loader: 'vue-loader'
      },
      {
        test: /\.css$/i,
        use: ['style-loader','css-loader']
      },
      {
        test: /\.less/,
        use: ['style-loader','css-loader','less-loader']
      },
      {
        test: /\.scss$/,
        use: [
          // 将 JS 字符串生成为 style 节点
          'style-loader',
          // 将 CSS 转化成 CommonJS 模块
          'css-loader',
          // 将 Sass 编译成 CSS
          'sass-loader',
        ]
      },
      {
        test: /\.ts$/,
        loader: 'ts-loader',
        exclude: /node_modules/,
        options: {
          appendTsSuffixTo: [/\.vue$/],
          configFile: path.resolve(process.cwd(), 'tsconfig.json') ,
        }
      }
    ]
  },
  stats: "errors-only",
  plugins: [
    new HtmlWebpackPlugin({
      template: './public/index.html'
    }),
    new VueLoaderPlugin(),
    new CleanWebpackPlugin(),
    new FriendlyErrorsWebpackPlugin({
      compilationSuccessInfo: {
        messages: [`Your app is ready at here: http://localhost:8080/`],  
      },
    }),
  ],
  resolve: {
    alias: {
      extensions: ['.js', '.jsx', '.json', '.vue', '.ts'],
      "@": path.resolve("src"),
    },
  },
  // externals: {
  //   vue: 'Vue',
  // }
}

module.exports = config;